<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="c">hello world</p>
    <input type="text" v-focus />
    <hr />
    <my-ceshi></my-ceshi>
  </div>
</template>

<script>
import MyCeshi from "./components/MyCeshi.vue";
export default {
  data() {
    return {
      c: "red",
    };
  },
  //自定义指令
  directives: {
    /*  指令: {
       // el 是使用 v-color 指令的DOM元素
        // obj 对象的 value 属性，就是传递的 pink 参数
      bind(el, obj) {}, //只会执行一次,可以做一些初始化的操作
      inserted(el, obj) {}, //只会执行一次
      update() {}, //数据更新后会执行
      componentUpdated() {}, //数据更新后,包括子组件的数据也更新后,他会执行
      unbind() {}, //指令解绑的时候(组件销毁)执行
    },
    指令(el, obj) {}, //这个函数写法,它相当于bind和update方法 */
    color(el, obj) {
      // 页面DOM渲染后，使用 v-color 指令的元素会调用一次bind函数
      el.style.color = obj.value;
    },
    foucs: {
      insertend(el) {
        el.foucs();
      },
    },
  },

  components: { MyCeshi },
};
</script>

<style>
</style>